在 HTML 中只允许数字输入

您所在的位置:网站首页 html input 限制数字 在 HTML 中只允许数字输入

在 HTML 中只允许数字输入

2024-06-26 12:16| 来源: 网络整理| 查看: 265

在 HTML 中在 input 标签中使用 type="number" 只允许数字输入 在 HTML 中在 JavaScript 中编写客户端验证以仅允许输入数字

本文将介绍几种在 HTML 的文本输入字段中只允许数字输入的方法。

在 HTML 中在 input 标签中使用 type="number" 只允许数字输入

在 HTML 中,我们使用 input 标签来获取用户的输入。

我们可以使用 input 标签中的 type 属性指定输入类型。input 标签接受各种输入类型,如文本、数字、密码、电子邮件等。

我们可以使用 type 属性来只允许 HTML 中的数字输入。例如,创建一个 type 属性为 number 的 input 标签。

接下来,创建一个提交按钮。当我们输入任何字符而不是数字时,将不会提交表单。

但是,不同浏览器的行为是不同的。

在 Firefox 中,下面的示例允许在输入区域中进行任何输入。但是它不允许在单击按钮时提交值。

在 Chrome 的情况下,它不允许输入任何其他字符,而不是数字字符。Firefox 允许粘贴其他输入,但 Chrome 不允许。

例如,如果我们复制一些随机文本并将其粘贴到 Firefox 的输入区域,文本将被粘贴,但在 Chrome 中不会发生这种情况。将内容拖放到文本区域时,此行为也是相同的。

因此,要添加一些验证,我们可以禁用文本区域中的拖放和粘贴操作。例如,在 input 标签中写入 ondrop 和 onpaste 属性并写入 return false; 作为他们的价值观。

通过这样做,文本区域中的复制粘贴和拖放功能将被禁用。

示例代码:

Click 在 HTML 中在 JavaScript 中编写客户端验证以仅允许输入数字

虽然上述方法并非在所有浏览器中都能完美运行,但需要添加一些客户端验证以允许在文本区域中仅键入数字值。为此,我们需要编写一些 JavaScript。

我们需要添加这样的验证,其中只能接受来自值 0-9 的输入。为此,我们在 JavaScript 中有一个事件 onkeypress。

onkeypress 事件在用户按下键时执行。在 onkeypress 事件中,我们只能返回 0-9 之间的值。

我们可以使用 charCode 属性来获取按下输入的字符代码。

例如,将 onkeypress 事件写为 input 标记中的属性。

在属性内部,使用 && 运算符返回语句 event.charCode>=48 和 event.charCode Click



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3